<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-04-24 10:01:25
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-10-07 15:18:08
 * @FilePath: \cxl-admin\src\pages\operation\setMeal\setMealDialog\Index.vue
-->
<template>
    <DialogVue :data="dialogData" @close="onDialogClose">
        <template #content>
            <div class="price-container">
                <el-form
                    ref="ruleFormRef"
                    :inline="true"
                    :model="data.config"
                    :rules="data.configRules"
                    label-width="136px"
                    style="width: 100%; display: flex; flex-wrap: wrap"
                >
                    <el-form-item label="产品类型：" prop="productType">
                        <el-select
                            v-model="data.config.productType"
                            placeholder="请选择产品类型"
                            @change="data.onSelectProductType"
                            class="li"
                            :disabled="data.config.type === 'edit'"
                        >
                            <el-option
                                v-for="item in productTypeArray"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="套餐名称：" prop="packageName">
                        <el-select
                            v-model="data.config.packageName"
                            placeholder="请选择套餐名称"
                            @change="data.onSelectPackageName"
                            class="li"
                        >
                            <el-option
                                v-for="item in packageNameArray"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="市场价：" prop="marketPrice">
                        <el-input
                            v-model="data.config.marketPrice"
                            placeholder="请输入市场价"
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="优惠价：" prop="preferentialPrice">
                        <el-input
                            v-model="data.config.preferentialPrice"
                            placeholder="请输入优惠价"
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="销售价：">
                        <el-input
                            :value="
                                (Number(data.config.marketPrice) - Number(data.config.preferentialPrice)).toFixed(2)
                            "
                            placeholder="请输入销售价"
                            disabled
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="次数：" prop="count">
                        <el-input-number
                            v-model="data.config.count"
                            type="number"
                            :min="1"
                            placeholder="请输入次数"
                            clearable
                            class="li"
                        ></el-input-number>
                    </el-form-item>
                    <el-form-item label="单价：">
                        <el-input
                            :value="
                                Math.fround(
                                    (Number(data.config.marketPrice) - Number(data.config.preferentialPrice)) /
                                        Number(data.config.count)
                                ).toFixed(2)
                            "
                            placeholder="请输入单价"
                            disabled
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="购买限制：">
                        <el-input
                            v-model="data.config.limitCount"
                            placeholder="请输入购买限制次数"
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="排序：" prop="sort">
                        <el-input
                            v-model="data.config.sort"
                            placeholder="请输入排序"
                            type="number"
                            clearable
                            class="li"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="标签：">
                        <el-input v-model="data.config.label" placeholder="请输入标签" clearable class="li"></el-input>
                    </el-form-item>
                    <el-form-item label="状态 ：">
                        <el-switch v-model="data.config.status" inline-prompt active-text="启用" inactive-text="禁用" />
                    </el-form-item>
                </el-form>

                <div class="btn">
                    <el-button
                        type="primary"
                        @click="
                            data.onComfirmEdit(ruleFormRef, () => {
                                emits('visible')
                            })
                        "
                        >确定</el-button
                    >
                    <el-button @click="onDialogClose">取消</el-button>
                </div>
            </div>
        </template>
    </DialogVue>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from 'vue'
import DialogVue from '@/components/baseDialog/Index.vue'
import { FormInstance } from 'element-plus'
import { SetMealPrice } from '.'
import { productTypeArray, packageNameArray, productTypeMap } from '@/utils/config'

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['visible'])

/**
 * 监听父组件传递的参数
 */
const props = defineProps(['data'])

/**
 * form 表单
 */
const ruleFormRef = ref<FormInstance>()

/**
 * 弹窗数据
 */
const dialogData = reactive({
    visible: false,
    type: 'create',
    title: '新增价格设置-套餐',
    width: '800px'
})

/**
 * 初始化数据
 */
const data = reactive(new SetMealPrice())

/**
 * 监听参数变化
 */
watchEffect(() => {
    dialogData.visible = props.data.visible
    dialogData.type = props.data.type
    dialogData.title = props.data.type === 'edit' ? '编辑价格设置-套餐' : '新增价格设置-套餐'

    console.log('data', props.data)
    if (props.data.visible && props.data.type === 'edit') {
        data.config.id = props.data.data.id
        data.getDetailedById(props.data.data.id)
    } else if (props.data.visible && props.data.type === 'create') {
        data.config.productType = ''
        data.config.productTypeNumber = ''
        data.config.packageName = ''
        data.config.packageNameNumber = 0
        data.config.marketPrice = ''
        data.config.preferentialPrice = ''
        data.config.salesPrice = ''
        data.config.count = 1
        data.config.price = ''
        data.config.limitCount = ''
        data.config.sort = ''
        data.config.label = ''
        data.config.status = true
    }
    data.config.type = props.data.type
})

/**
 * 监听弹窗关闭
 */
const onDialogClose = () => {
    //重置数据

    if (ruleFormRef.value) {
        ruleFormRef.value.resetFields()
    }
    emits('visible')
}

/**
 * 重置校验
 * @param formEl
 */
const reset = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style scoped lang="scss">
.btn {
    display: flex;
    justify-content: center;
    margin: 32px 0 16px 0;
}

.li {
    width: 200px;
}
.gift {
    box-sizing: border-box;
    padding-left: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    > p {
        margin-right: 10px;
    }
    > span {
        margin-right: 10px;
        width: 114px;
        text-align: right;
    }
}
.gift-li {
    width: 200px;
    margin-right: 10px;
}
</style>
